<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>使用Clojure开发Web入门系列（三） - (power up)</title>
  <meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

<meta name="theme-color" content="#f8f5ec" />
<meta name="msapplication-navbutton-color" content="#f8f5ec">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="#f8f5ec">


<meta name="author" content="Kevin Jiang" /><meta name="description" content="在使用Clojure开发Web入门系列（二）的最后做了一个动态输出hello&#43;url参数的一个小demo，如果有很多这样的需求，不同的url" /><meta name="keywords" content="KevinJiang, AI大模型, AI落地, 全栈工程师, Java, Spring Boot" />






<meta name="generator" content="Hugo 0.84.4 with theme even" />


<link rel="canonical" href="http://kevinjiang.info/post/clojure/%E4%BD%BF%E7%94%A8clojure%E5%BC%80%E5%8F%91web%E5%85%A5%E9%97%A8%E7%B3%BB%E5%88%97%E4%B8%89/" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">



<link href="/sass/main.min.78f8f17bab244b9ee62ad16480c9584d5fc2db06ae20681d1ca225cefd80767c.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.css" integrity="sha256-7TyXnr2YU040zfSP+rEcz29ggW4j56/ujTPwjMzyqFY=" crossorigin="anonymous">


<meta property="og:title" content="使用Clojure开发Web入门系列（三）" />
<meta property="og:description" content="在使用Clojure开发Web入门系列（二）的最后做了一个动态输出hello&#43;url参数的一个小demo，如果有很多这样的需求，不同的url" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://kevinjiang.info/post/clojure/%E4%BD%BF%E7%94%A8clojure%E5%BC%80%E5%8F%91web%E5%85%A5%E9%97%A8%E7%B3%BB%E5%88%97%E4%B8%89/" /><meta property="article:section" content="post" />
<meta property="article:published_time" content="2016-03-14T19:12:49+00:00" />
<meta property="article:modified_time" content="2016-03-14T19:12:49+00:00" />

<meta itemprop="name" content="使用Clojure开发Web入门系列（三）">
<meta itemprop="description" content="在使用Clojure开发Web入门系列（二）的最后做了一个动态输出hello&#43;url参数的一个小demo，如果有很多这样的需求，不同的url"><meta itemprop="datePublished" content="2016-03-14T19:12:49+00:00" />
<meta itemprop="dateModified" content="2016-03-14T19:12:49+00:00" />
<meta itemprop="wordCount" content="3149">
<meta itemprop="keywords" content="Clojure,Web," /><meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="使用Clojure开发Web入门系列（三）"/>
<meta name="twitter:description" content="在使用Clojure开发Web入门系列（二）的最后做了一个动态输出hello&#43;url参数的一个小demo，如果有很多这样的需求，不同的url"/>

<!--[if lte IE 9]>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.1.20170427/classList.min.js"></script>
<![endif]-->

<!--[if lt IE 9]>
  <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->

</head>
<body>
  <div id="mobile-navbar" class="mobile-navbar">
  <div class="mobile-header-logo">
    <a href="/" class="logo">(Power up)</a>
  </div>
  <div class="mobile-navbar-icon">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>
<nav id="mobile-menu" class="mobile-menu slideout-menu">
  <ul class="mobile-menu-list">
    <a href="/">
        <li class="mobile-menu-item">首页</li>
      </a><a href="/post/">
        <li class="mobile-menu-item">归档</li>
      </a><a href="/tags/">
        <li class="mobile-menu-item">标签</li>
      </a><a href="/categories/">
        <li class="mobile-menu-item">分类</li>
      </a><a href="/resume/">
        <li class="mobile-menu-item">简历</li>
      </a>
  </ul>

  


</nav>

  <div class="container" id="mobile-panel">
    <header id="header" class="header">
        <div class="logo-wrapper">
  <a href="/" class="logo">(Power up)</a>
</div>





<nav class="site-navbar">
  <ul id="menu" class="menu">
    <li class="menu-item">
        <a class="menu-item-link" href="/">首页</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/post/">归档</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/tags/">标签</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/categories/">分类</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/resume/">简历</a>
      </li>
  </ul>
</nav>

    </header>

    <main id="main" class="main">
      <div class="content-wrapper">
        <div id="content" class="content">
          <article class="post">
    
    <header class="post-header">
      <h1 class="post-title">使用Clojure开发Web入门系列（三）</h1>

      <div class="post-meta">
        <span class="post-time"> 2016-03-14 </span>
        
          <span class="more-meta"> 约 3149 字 </span>
          <span class="more-meta"> 预计阅读 7 分钟 </span>
        
      </div>
    </header>

    <div class="post-toc" id="post-toc">
  <h2 class="post-toc-title">文章目录</h2>
  <div class="post-toc-content always-active">
    <nav id="TableOfContents">
  <ul>
    <li><a href="#wrap-reload">wrap-reload</a></li>
    <li><a href="#效果">效果</a></li>
    <li><a href="#hiccup">hiccup</a></li>
    <li><a href="#显示提交的内容">显示提交的内容</a></li>
  </ul>
</nav>
  </div>
</div>
    <div class="post-content">
      <p>在<a href="/2016/03/08/%E4%BD%BF%E7%94%A8Clojure%E5%BC%80%E5%8F%91Web%E5%85%A5%E9%97%A8%E7%B3%BB%E5%88%97%EF%BC%88%E4%BA%8C%EF%BC%89">使用Clojure开发Web入门系列（二）</a>的最后做了一个动态输出hello+url参数的一个小demo，如果有很多这样的需求，不同的url调用不同的处理函数，那么就得在调用cond的地方写上很多条件，或者再写上另外一个函数专门处理这些条件，这就是web后端开发的路由组件。</p>
<p>Clojure方便的一点就在此，对于这个功能已经有一个非常强大而实用的类库来处理了，那就是<a href="https://github.com/weavejester/compojure">compojure</a>，这就是一个强大的Ring/Clojure路由处理库。</p>
<h1 id="零添加依赖">零、添加依赖</h1>
<p>打开项目根目录下面的<code>project.clj</code>，在<code>dependencies</code>里面添加<code>compojure</code>的依赖<code>[compojure &quot;1.6.1&quot;]</code></p>
<p>然后运行<code>lein deps</code>下载依赖包。</p>
<h1 id="一修改代码">一、修改代码</h1>
<p>修改<code>core.clj</code>，最后看起来像下面这样</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-clojure" data-lang="clojure"><span class="p">(</span><span class="kd">ns </span><span class="nv">learnweb.core</span>
  <span class="p">(</span><span class="ss">:require</span> <span class="p">[</span><span class="nv">ring.adapter.jetty</span> <span class="ss">:refer</span> <span class="p">[</span><span class="nv">run-jetty</span><span class="p">]]</span>
            <span class="p">[</span><span class="nv">compojure.core</span> <span class="ss">:refer</span> <span class="p">[</span><span class="nv">defroutes</span> <span class="nv">GET</span><span class="p">]]</span>    <span class="c1">; (1)</span>
            <span class="p">[</span><span class="nv">compojure.route</span> <span class="ss">:refer</span> <span class="p">[</span><span class="nv">not-found</span><span class="p">]])</span>    <span class="c1">; (2)</span>
  <span class="p">(</span><span class="ss">:gen-class</span><span class="p">))</span>

<span class="p">(</span><span class="nf">defroutes</span>
  <span class="nv">app</span>
  <span class="p">(</span><span class="nf">GET</span> <span class="s">&#34;/&#34;</span> <span class="p">[]</span> <span class="s">&#34;&lt;h1&gt;Hello world!&lt;/h1&gt;&#34;</span><span class="p">)</span>
  <span class="p">(</span><span class="nf">GET</span> <span class="s">&#34;/hello/:name&#34;</span> <span class="p">[</span><span class="nv">name</span><span class="p">]</span> <span class="p">(</span><span class="nb">str </span><span class="s">&#34;Hello &#34;</span> <span class="nv">name</span><span class="p">))</span>
  <span class="p">(</span><span class="nf">not-found</span> <span class="s">&#34;&lt;h1&gt;Page not found&lt;/h1&gt;&#34;</span><span class="p">))</span>    <span class="c1">; (3)</span>

<span class="p">(</span><span class="kd">defn </span><span class="nv">-main</span>
  <span class="s">&#34;I don&#39;t do a whole lot ... yet.&#34;</span>
  <span class="p">[</span><span class="o">&amp;</span> <span class="nv">args</span><span class="p">]</span>
  <span class="p">(</span><span class="nf">run-jetty</span> <span class="nv">app</span> <span class="p">{</span><span class="ss">:port</span> <span class="mi">3000</span><span class="p">}))</span>    <span class="c1">; (4)</span>
</code></pre></td></tr></table>
</div>
</div><!-- raw HTML omitted -->
<p>相比之前的简洁不少。
(1) 引入宏<code>defroutes</code>和<code>GET</code>。<code>defroutes</code>定义路由列表。<code>GET</code>定义一条路由规则，说明此条规则只处理http的get请求（其他的有post, head, put, delete, option，详细内容请参考<a href="https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html">rfc2616 Method Definitions</a>）。</p>
<p>(2) 引用函数<code>not-found</code>处理请求不在路由规则的情况</p>
<p>(3) 定义路由规则列表。第一个是<code>/</code>，也就是直接输入域名后访问的情况。第二个是<code>/hello/:name</code>，匹配所有以/hello/开头的，后面不含有/的所有请求，比如/hello/Kitty，像/hello/abc/defg这样的是不属于这个规则的；然后:name是一个匹配规则，可以匹配/hello/后面的内容，匹配后把匹配到的内容放入一个叫name的变量，以供后面的处理函数使用。最后一个是not-found，也就是不在前面的所有情况都被纳入到这里。</p>
<p>(4) 把run-jetty后面之前的<code>handle</code>改成这里定义的<code>app</code></p>
<p>这里看不到{:status 200 :headers {&ldquo;Content-Type&rdquo; &ldquo;text/html&rdquo;} :body}这样的在代码里面写列的代码了（当然你也可以根据自己的需要做得更加灵活一些），<code>compojure</code>会调用<code>ring</code>的<code>response</code>去处理相应的status和header。打开compojure的not-found(~/.m2/repository/compojure/compojure/1.5.0/compojure-1.5.0.jar!/compojure/route.clj)函数就会看到调用了(status 404)。</p>
<p>修改完之后按<code>ctrl+c</code>停止之前启动的服务，然后两次运行<code>lein run</code>启动http server。</p>
<p>完整的代码请<code>git checkout 1.3</code></p>
<p>这里用短短的几行定义就实现了非常强大的路由功能，在Clojure的世界里，还有很多强大而简洁的类库。</p>
<h1 id="二表单">二、表单</h1>
<h2 id="wrap-reload">wrap-reload</h2>
<p>在开始接下来的内容之前，先来看一下<code>wrap-reload</code>这个<code>ring</code>的middleware。<code>ring</code>提供了非常多的middleware来处理请求。可以把一个请求想像成一个管道，有很多个管道一个接一个，<code>ring</code>提供的middleware就是管道：</p>
<pre><code>               - - - - - - - + - - - - - - + - - - - - - + - - -
-- request --&gt;   middleware     middleware    middleware    ...   -- response --&gt;
               - - - - - - - + - - - - - - + - - - - - - + - - -
</code></pre>
<p>通过各种的middleware，一个request就转换成了一个response。那么<code>wrap-reload</code>这个middleware又是做什么的呢。回想一下之前的代码修改都是修改完成后都要重启服务器才能够看到修改的效果，使用了这个middleware就可以不需要重启服务器，所做的修改刷新页面就可以看到效果，那叫一个方便。在lisp的世界做开发就是这么的爽，还有一个<code>repl</code>可以做交互式的开发（Interactive development），比如有一个功能不知道该如何实现，可以边写边在<code>repl</code>里面调试，那叫一个爽啊。进入<code>repl</code>可以到项目的根目录运行<code>lein repl</code>。好了，回头再来看这个<code>wrap-reload</code>如何使用，在ns代码块里面把他require进来(1)：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-clojure" data-lang="clojure"><span class="p">(</span><span class="kd">ns </span><span class="nv">learnweb.core</span>
  <span class="p">(</span><span class="ss">:require</span> <span class="p">[</span><span class="nv">ring.adapter.jetty</span> <span class="ss">:refer</span> <span class="p">[</span><span class="nv">run-jetty</span><span class="p">]]</span>
            <span class="p">[</span><span class="nv">ring.middleware.reload</span> <span class="ss">:refer</span> <span class="p">[</span><span class="nv">wrap-reload</span><span class="p">]]</span>    <span class="c1">; (1)</span>
            <span class="p">[</span><span class="nv">ring.middleware.params</span> <span class="ss">:refer</span> <span class="p">[</span><span class="nv">wrap-params</span><span class="p">]]</span>    <span class="c1">; (2)</span>
            <span class="p">[</span><span class="nv">compojure.core</span> <span class="ss">:refer</span> <span class="p">[</span><span class="nv">defroutes</span> <span class="nv">GET</span><span class="p">]]</span>
            <span class="p">[</span><span class="nv">compojure.route</span> <span class="ss">:refer</span> <span class="p">[</span><span class="nv">not-found</span><span class="p">]])</span>
  <span class="p">(</span><span class="ss">:gen-class</span><span class="p">))</span>
</code></pre></td></tr></table>
</div>
</div><p>然后套在app这个handler上面<code>(wrap-reload #'app)</code>，注意这里需要使用var quote<code>#'app</code>而不是直接使用<code>app</code>。来看下<code>wrap-reload</code>的说明：Reload namespaces of modified files before the request is passed to the supplied handler。如果使用<code>app</code>的话，那么在定义<code>app</code>的文件做了修改就不会reload，所以需要<code>#'app</code>这种<a href="http://clojuredocs.org/clojure.core/var">var-quote</a>的方式。</p>
<p>另外在demo里面还使用了<code>wrap-params</code>这个middleware，他会把url上面的query string（也就是<code>http://localhost:3000/?a=1&amp;b=c</code>里面的a=1&amp;b=c这样的）和表单里面的数据提取出来放到request这个大map的:params里面，方便后面的middleware使用。修改run-jetty那一行，run-jetty的时候会是这样的，在app的前面添加了两个middleware：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-clojure" data-lang="clojure"><span class="p">(</span><span class="nf">run-jetty</span> <span class="p">(</span><span class="nf">wrap-reload</span> <span class="p">(</span><span class="nf">wrap-params</span> <span class="o">#</span><span class="ss">&#39;app</span><span class="p">))</span> <span class="p">{</span><span class="ss">:port</span> <span class="mi">3000</span><span class="p">})</span>
</code></pre></td></tr></table>
</div>
</div><h2 id="效果">效果</h2>
<p>现在咱们来做一个可以提交点东西的表单页面。有一个用户名输入框，还有一个写更多内容的大输入框，再加上一个提交按钮。页面看起来像下面这样：
<img src="/img/form.png" alt="">
图1</p>
<p>点击提交按钮后会像下面这样：
<img src="/img/message.png" alt="">
图2</p>
<h2 id="hiccup">hiccup</h2>
<p>实现上面效果之前，再来介绍一个非常强大而简洁的生成html的库，使用这个库我们不需要写一行html代码，可以全部使用clojure代码来生成整个html。</p>
<p><a href="https://github.com/weavejester/hiccup"><code>hiccup</code></a>同样也是<a href="https://github.com/weavejester/compojure"><code>compojure</code></a>的作者<a href="https://github.com/weavejester">weavejester</a>实现的。先来看下如何使用：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-clojure" data-lang="clojure"><span class="p">(</span><span class="nf">html</span> <span class="p">[</span><span class="ss">:span</span> <span class="p">{</span><span class="ss">:class</span> <span class="s">&#34;foo&#34;</span><span class="p">}</span> <span class="s">&#34;bar&#34;</span><span class="p">])</span>
<span class="c1">;; 生成的html代码为：&lt;span class=&#34;foo&#34;&gt;bar&lt;/span&gt;</span>
<span class="c1">;; hiccup使用vector的方式来做一个html的标签，第一个元素为标签的名字；</span>
<span class="c1">;; 第二个参数是一个map，定义了这个标签的属性，这个参数可以省略；</span>
<span class="c1">;; 第三个参数是里面的内容，可以是一个字符串，也可以定义其他的元素，像下面这样</span>
<span class="c1">;; [:div {:class &#34;outer&#34;} [:div {:class &#34;inner&#34;} &#34;Inner div&#34;]]</span>
</code></pre></td></tr></table>
</div>
</div><p>代码里面使用了一个<code>html5</code>函数，这个函数是在<code>hiccup.page</code>包里面，用于生成html5标准的doctype头和html元素。<code>html</code>函数用于把函数的参数转换为html代码。</p>
<p>所以我们的demo添加一个表单的页面：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-clojure" data-lang="clojure"><span class="p">(</span><span class="k">def </span><span class="nv">form-html</span>
  <span class="p">(</span><span class="nf">html5</span>
    <span class="p">(</span><span class="nf">html</span>
      <span class="p">[</span><span class="ss">:body</span>
       <span class="p">[</span><span class="ss">:h1</span> <span class="s">&#34;Hello form&#34;</span><span class="p">]</span>
       <span class="p">[</span><span class="ss">:form</span> <span class="p">{</span><span class="ss">:action</span> <span class="s">&#34;/message&#34;</span> <span class="ss">:method</span> <span class="s">&#34;post&#34;</span><span class="p">}</span>
        <span class="p">[</span><span class="ss">:div</span>
         <span class="p">[</span><span class="ss">:label</span> <span class="p">{</span><span class="ss">:for</span> <span class="s">&#34;name&#34;</span><span class="p">}</span> <span class="s">&#34;名字:&#34;</span><span class="p">]</span>
         <span class="p">[</span><span class="ss">:input</span> <span class="p">{</span><span class="ss">:type</span> <span class="s">&#34;text&#34;</span>
                  <span class="ss">:name</span> <span class="s">&#34;name&#34;</span><span class="p">}]]</span>
        <span class="p">[</span><span class="ss">:div</span>
         <span class="p">[</span><span class="ss">:label</span> <span class="p">{</span><span class="ss">:for</span> <span class="s">&#34;message&#34;</span><span class="p">}</span> <span class="s">&#34;消息:&#34;</span><span class="p">]</span>
         <span class="p">[</span><span class="ss">:textarea</span> <span class="p">{</span><span class="ss">:cols</span> <span class="mi">80</span> <span class="ss">:rows</span> <span class="mi">5</span> <span class="ss">:name</span> <span class="s">&#34;message&#34;</span><span class="p">}]]</span>
        <span class="p">[</span><span class="ss">:div</span>
         <span class="p">[</span><span class="ss">:input</span> <span class="p">{</span><span class="ss">:type</span> <span class="s">&#34;submit&#34;</span> <span class="ss">:value</span> <span class="s">&#34;提交&#34;</span><span class="p">}]]]])))</span>
</code></pre></td></tr></table>
</div>
</div><p>最终生成的html效果就是上面图1一样
<img src="/img/form_source.png" alt=""></p>
<h2 id="显示提交的内容">显示提交的内容</h2>
<p>添加一个函数用户显示提交的内容：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-clojure" data-lang="clojure"><span class="p">(</span><span class="kd">defn </span><span class="nv">show-message</span> <span class="p">[</span><span class="nv">params</span><span class="p">]</span>
  <span class="p">(</span><span class="k">let </span><span class="p">[{</span><span class="nb">name </span><span class="s">&#34;name&#34;</span> <span class="nv">message</span> <span class="s">&#34;message&#34;</span><span class="p">}</span> <span class="nv">params</span><span class="p">]</span>
    <span class="p">(</span><span class="nf">html5</span>
      <span class="p">(</span><span class="nf">html</span>
        <span class="p">[</span><span class="ss">:body</span>
         <span class="p">[</span><span class="ss">:h2</span> <span class="nv">name</span><span class="p">]</span>
         <span class="p">[</span><span class="ss">:p</span> <span class="nv">message</span><span class="p">]]))))</span>
</code></pre></td></tr></table>
</div>
</div><p>这里同样使用了hiccup来生成html。在let语句里面把params里面保存的表单的值name和message取出来，填充到html内容里面。这个函数的参数params是从何而来呢？那就来看一下<code>app</code>的定义：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-clojure" data-lang="clojure"><span class="p">(</span><span class="nf">defroutes</span>
  <span class="nv">app</span>
  <span class="p">(</span><span class="nf">GET</span> <span class="s">&#34;/&#34;</span> <span class="p">[]</span> <span class="nv">form-html</span><span class="p">)</span>
  <span class="p">(</span><span class="nf">POST</span> <span class="s">&#34;/message&#34;</span> <span class="p">{</span><span class="nv">params</span> <span class="ss">:params</span><span class="p">}</span> <span class="p">(</span><span class="nf">show-message</span> <span class="nv">params</span><span class="p">))</span>    <span class="c1">; (1)</span>
  <span class="p">(</span><span class="nf">GET</span> <span class="s">&#34;/hello/:name&#34;</span> <span class="p">[</span><span class="nv">name</span><span class="p">]</span> <span class="p">(</span><span class="nb">str </span><span class="s">&#34;Hello &#34;</span> <span class="nv">name</span><span class="p">))</span>
  <span class="p">(</span><span class="nf">not-found</span> <span class="s">&#34;&lt;h1&gt;Page not found&lt;/h1&gt;&#34;</span><span class="p">))</span>
</code></pre></td></tr></table>
</div>
</div><p>(1) 这里添加了一个post的处理规则，如果表单提交的页面是/message，那么就用这个路由去处理。第二个参数是一个解构表达式，如果不用解构表达式的话，而且又需要提交的数据应该会像这样<code>(POST &quot;/message&quot; request (show-message request))</code>，用一个变量<code>request</code>存储请求的所有内容。现在这里是{params :params}，其实就是把request里面的:params提取出来，然后传递给<code>show-message</code>函数。</p>
<p>到这里就已经把所有的代码修改完成了，完整的<a href="https://github.com/kevindragon/learn-clojure-web">代码</a>请：<code>git checkout 1.3.1</code>。</p>
<p><em>注意：</em> 别忘记引入<code>POST</code>这个<code>compojure.core</code>里面的宏</p>

    </div>

    <div class="post-copyright">
  <p class="copyright-item">
    <span class="item-title">文章作者</span>
    <span class="item-content">Kevin Jiang</span>
  </p>
  <p class="copyright-item">
    <span class="item-title">上次更新</span>
    <span class="item-content">
        2016-03-14
        
    </span>
  </p>
  
  <p class="copyright-item">
    <span class="item-title">许可协议</span>
    <span class="item-content"><a rel="license noopener" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank">CC BY-NC-ND 4.0</a></span>
  </p>
</div>
<div class="post-reward">
  <input type="checkbox" name="reward" id="reward" hidden />
  <label class="reward-button" for="reward">赞赏支持</label>
  <div class="qr-code">
    
    <label class="qr-code-image" for="reward">
        <img class="image" src="/img/wechat_pay_1242x1242.jpg">
        <span>微信打赏</span>
      </label>
    <label class="qr-code-image" for="reward">
        <img class="image" src="/img/alipay_600x600.jpg">
        <span>支付宝打赏</span>
      </label>
  </div>
</div><footer class="post-footer">
      <div class="post-tags">
          <a href="/tags/clojure/">Clojure</a>
          <a href="/tags/web/">Web</a>
          </div>
      <nav class="post-nav">
        <a class="prev" href="/post/spark%E8%BF%9E%E6%8E%A5mysql/">
            <i class="iconfont icon-left"></i>
            <span class="prev-text nav-default">spark连接mysql</span>
            <span class="prev-text nav-mobile">上一篇</span>
          </a>
        <a class="next" href="/post/kotlin/%E6%88%91%E6%9D%A5%E5%AD%A6kotlin-%E8%B5%B7%E6%AD%A5%E4%B9%8B%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95/">
            <span class="next-text nav-default">我来学Kotlin-起步之基础语法</span>
            <span class="next-text nav-mobile">下一篇</span>
            <i class="iconfont icon-right"></i>
          </a>
      </nav>
    </footer>
  </article>
        </div>
        

  

  

      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="social-links">
      <a href="mailto:wenlin1988@126.com" class="iconfont icon-email" title="email"></a>
      <a href="https://www.linkedin.com/in/%E6%96%87%E6%9E%97-%E8%92%8B-0a3204126/" class="iconfont icon-linkedin" title="linkedin"></a>
      <a href="https://github.com/kevindragon" class="iconfont icon-github" title="github"></a>
  <a href="http://kevinjiang.info/index.xml" type="application/rss+xml" class="iconfont icon-rss" title="rss"></a>
</div>

<div class="copyright">
  <span class="power-by">
    由 <a class="hexo-link" href="https://gohugo.io">Hugo</a> 强力驱动
  </span>
  <span class="division">|</span>
  <span class="theme-info">
    主题 -
    <a class="theme-link" href="https://github.com/olOwOlo/hugo-theme-even">Even</a>
  </span>

  

  <span class="copyright-year">
    &copy;
    2015 -
    2023<span class="heart"><i class="iconfont icon-heart"></i></span><span>Kevin Jiang</span>
    <a href="https://beian.miit.gov.cn/" target="_blank">湘ICP备2022022745号</a>
  </span>
</div>

    </footer>

    <div class="back-to-top" id="back-to-top">
      <i class="iconfont icon-up"></i>
    </div>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/slideout@1.0.1/dist/slideout.min.js" integrity="sha256-t+zJ/g8/KXIJMjSVQdnibt4dlaDxc9zXr/9oNPeWqdg=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.js" integrity="sha256-XVLffZaxoWfGUEbdzuLi7pwaUJv1cecsQJQqGLe7axY=" crossorigin="anonymous"></script>



<script type="text/javascript" src="/js/main.min.c99b103c33d1539acf3025e1913697534542c4a5aa5af0ccc20475ed2863603b.js"></script>
  <script type="text/javascript">
    window.MathJax = {
      tex: {
        inlineMath: [['$','$'], ['\\(','\\)']],
        tags: 'ams',
        }
    };
  </script>
  <script type="text/javascript" async src="/lib/mathjax/es5/tex-mml-chtml.js"></script>

<script id="baidu_analytics">
  var _hmt = _hmt || [];
  (function() {
    if (window.location.hostname === 'localhost') return;
    var hm = document.createElement("script"); hm.async = true;
    hm.src = "https://hm.baidu.com/hm.js?b73ff6d4afc4af9e582d8a5dc068bab9";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
  })();
</script>






</body>
</html>
